@prefix-image: ~'@{nameSpace}-image';

.@{prefix-image} {
  position: relative;
  display: flex;
  overflow: hidden;
  .not-user-select();

  @keyframes options-visible {
    from {
      opacity: 0.5;
    }

    to {
      opacity: 1;
    }
  }

  .@{prefix-image}-img {
    vertical-align: middle;
    border: 0 none;
    flex: 1;
  }

  .@{prefix-image}-options {
    .absolute-fill();
    .flex();
    .flex-column();
    .align-end();
    .justify-end();
  }

  .@{prefix-image}-error {
    flex: 1;
    .absolute-fill();
    .flex-center();
    color: var(--design-text-color-3);
    background-color: var(--design-bg-color-1);
  }

  .@{prefix-image}-loading {
    .absolute-fill();
    flex: 1;
    .flex-center();
    color: var(--design-text-color-3);
    background-color: var(--design-bg-color-1);
  }

  .@{prefix-image}-close {
    position: absolute;
    top: 10px;
    right: 10px;
    .cursor-pointer();
  }
}

.@{prefix-image}-circular {
  border-radius: 50%;
}